<template>
  <div>
    <header-comm></header-comm>
    <div class="bcg">
      <div class="hed_btn">
        <a-button type="primary" @click="addnewgg">添加广告</a-button>

        <div class="search_gg">
          <div class="search_left">
            <span>分类：</span>
            <a-select
              show-search
              allowClear
              option-filter-prop="children"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              placeholder="请选择分类"
              style="width: 250px"
              @change="flChange"
            >
              <a-select-option
                v-for="(item,i) in classList"
                :key="i"
                :value="item.number"
              >{{item.describe}}</a-select-option>
            </a-select>
          </div>

          <div class="search_right">
            <a-input style="width:250px" v-model="keywords" @change="keychange" placeholder="关键词" />
          </div>
        </div>
      </div>
      <div class="xw_box">
        <!-- <a-tabs :default-active-key="tabkey" @change="callback">
          <a-tab-pane :key="1" tab="广告管理">
          
          </a-tab-pane>
          <a-tab-pane :key="2" tab="新增/修改广告" force-render></a-tab-pane>
        </a-tabs>-->

        <a-table
          :pagination="pagination"
          :columns="columns"
          @change="getadAdminList"
          :data-source="data"
        >
          <template slot="close" slot-scope="text, record, index">
            <div>
              <a-switch
                default-checked
                @change="swChange"
                :checked="record.vouch=='1'?true:false"
                @click="swclick(record.id)"
              />
            </div>
          </template>
          <template slot="px" slot-scope="text, record, index">
            <div>
              <a-input-number
                @change="pxchange(record)"
                :min="0"
                v-model="record.px"
                style="width:100px;"
              />
            </div>
          </template>
          <template slot="file" slot-scope="text, record, index">
            <div class="ggpic">
              <img v-if="text" :src="'http://image.bearing.cn/advert/'+text" alt />
              <p>
                <a target="_block" :href="record.linkurl">{{record.linkurl}}</a>
              </p>
            </div>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a href="javascript:;" @click="edit(record)" class="del">修改</a>
              <a-popconfirm title="确定删除吗?" class="del" @confirm="() => ggfldelete(record.id)">
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
        <div class="titp">
          <span class="red">*</span> 值越大，越靠前
        </div>
      </div>
    </div>
    <div class="addgglist_box" v-if="addgglistflag">
      <div class="addgglist_tk">
        <addgglist></addgglist>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import addgglist from "./addgglist.vue";
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "公司名称",
    dataIndex: "GSMC",
    key: "GSMC"
  },
  {
    title: "分类编号",
    dataIndex: "number",
    key: "number"
  },
  {
    title: "分类名称",
    dataIndex: "describe",
    key: "describe"
  },
  {
    title: "图片",
    dataIndex: "file",
    key: "file",
    scopedSlots: { customRender: "file" }
  },

  // {
  //   title: "URL",
  //   dataIndex: "linkurl",
  //   key: "linkurl"
  // },
  {
    title: "排序号",
    dataIndex: "px",
    key: "px",
    scopedSlots: { customRender: "px" }
  },
  {
    title: "截止日期",
    dataIndex: "expire",
    key: "expire"
  },
  {
    title: "关闭",
    dataIndex: "close",
    key: "close",
    scopedSlots: { customRender: "close" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

const data = [];
import qs from "qs";
export default {
  inject: ["reload"],
  data() {
    return {
      data,
      columns,
      // tabkey: 1,
      edittit: "新增",
      // gg_flag: false,
      addgglistflag: false,
      classList: [],
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      adClass: "",
      keywords: "",
      editvalue: "",
      swid: ""
    };
  },

  methods: {
    flChange(value) {
      console.log(`selected ${value}`);
      this.adClass = value;
      this.pagination.current = 1;
      this.getadAdminList(this.pagination);
    },
    keychange() {
      this.pagination.current = 1;
      this.getadAdminList(this.pagination);
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    swclick(id) {
      this.swid = id;
    },
    swChange(checked) {
      console.log(`a-switch to ${checked}`);
      setTimeout(() => {
        this.axios
          .post(
            "suggest/adAdminVouch.php",
            qs.stringify({
              id: this.swid,
              vouch: checked == true ? 1 : 0
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.getadAdminList(this.pagination);
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }, 500);
    },
    // callback(key) {
    //   console.log(key);
    //   if (key == 1) {
    //     this.$router.push("/gggl");
    //   } else {
    //     this.$router.push("/addgglist?edittit=1");
    //   }
    // },

    ggfldelete(id) {
      this.axios
        .post(
          "suggest/adAdminDelete.php",
          qs.stringify({
            id: id
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.getadAdminList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    pxchange(value) {
      console.log(value);
      this.axios
        .post(
          "suggest/adAdminSort.php",
          qs.stringify({
            id: value.id,
            px: value.px
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    edit(value) {
      console.log(value);
      this.editvalue = value;
      this.addgglistflag = true;
      this.edittit = "修改";
    },
    addnewgg() {
      this.$parent.editvalue = "";
      this.addgglistflag = true;
      this.edittit = "新增";
    },
    getadAdminList(pagination) {
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "suggest/adAdminList.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: pagination.defaultPageSize,
            keywords: this.keywords,
            adClass: this.adClass
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.pagination.total = Number(res.data.result.total);
            for (var i = 0; i < res.data.result.data.length; i++) {
              res.data.result.data[i].key = i;
            }
            this.data = res.data.result.data;
          } else {
            this.pagination.total = 0;
            this.data = [];
          }
        });
    },
    getadAdminClassList() {
      this.axios.post("suggest/adAdminClassList.php").then(res => {
        console.log(res);
        if (res.data.code == 303) {
          this.classList = res.data.result;
        }
      });
    }
  },
  components: {
    headerComm,
    addgglist
  },
  created() {
    this.getadAdminClassList();
    this.getadAdminList(this.pagination);
  }
};
</script>

<style lang='less'>
.hed_btn {
     position: relative;
    top: 61px;
    width: 98%;
    left: 1%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0 0 5px #ccc;
  .search_gg {
    display: flex;
    .search_left {
      margin-right: 10px;
    }
  }
}
.xw_box {
  position: relative;
  top: 74px;
  text-align: left;
  background: #fff;
  width: 98%;
  left: 15px;
  padding: 20px 10px;
  height: 900px;

  .ant-tabs {
    height: 100%;
  }
}
.addgglist_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .addgglist_tk {
    position: absolute;
    top: 10%;
    left: 50%;
    background: #fff;
    width: 50%;
    transform: translateX(-50%);
  }
}
.ggpic img {
  width: 50px;
  // transition: all .3s;
}
.ggpic:hover img {
  // height: 100% !important;
  width: 200px;
  height: 50px;
}
.titp {
  position: relative;
  bottom: 56px;
  color: red;
}
</style>
